// 所有的物体
import Konva from "konva";
import computer from "../../public/icon/diannao.png";
export default class geometricObject {
  constructor() {
    this.clickedOnce = false; // 标记是否已经点击过生成图像
    this.existingImage = null; // 保存当前生成的图像对象

    // 用于存储 circle 形状对象落点坐标
    this.circleArr = null;
    // 存储 目标 形状对象的边界坐标
    this.nounCoordinate = [];

    this.previousToolEventHandlers = []; // 存储先前工具的事件监听器
  }

  // 圆形
  circle(layer, stage) {
    let circle;

    // 清除上一次工具留下的痕迹
    this.clearPreviousToolEventListeners(stage);

    // 事件
    stage.on("mousedown touchstart", circleTouchstart);
    // 将当前事件存入 previousToolEventHandlers
    this.previousToolEventHandlers.push({
      type: "mousedown touchstart",
      handler: circleTouchstart,
    });
    // 事件处理方法
    function circleTouchstart(e) {
      const pos = stage.getPointerPosition();
      const shape = stage.getIntersection(pos);
      if (!(shape && shape.getAttr("isDraggable"))) {
        circle = new Konva.Circle({
          x: pos.x, // 出现在画布上的位置
          y: pos.y, // 出现在画布上的位置
          radius: 10, // 物体大小
          fill: "red", // 物体内部颜色
          stroke: "black", //物体边缘颜色
          strokeWidth: 1, //物体边缘大小
          draggable: true, //允许拖动
          name: "circle",
        });
        // 设置圆形为可拖动
        circle.setAttr("isDraggable", true);

        circle.on("mouseover", function () {
          document.body.style.cursor = "pointer";
        });
        circle.on("mouseout", function () {
          document.body.style.cursor = "default";
        });

        layer.add(circle);
        stage.add(layer);
        // 重绘图层以显示新添加的圆形
        layer.draw();
      }
    }
  }

  // 图片
  ImageObject(layer, stage) {
    const imageObj = new Image();
    imageObj.onload = () => {
      // 事件
      // 清除上一次工具留下的痕迹
      this.clearPreviousToolEventListeners(stage);
      stage.on("mousedown touchstart", ImageTouchstart);
      this.previousToolEventHandlers.push({
        type: "mousedown touchstart",
        handler: ImageTouchstart,
      });
    };
    imageObj.src = computer;

    // 事件处理方法
    function ImageTouchstart() {
      const pos = stage.getPointerPosition();
      const shape = stage.getIntersection(pos);

      if (!(shape && shape.getAttr("isDraggable"))) {
        const darthVaderImg = new Konva.Image({
          image: imageObj,
          x: pos.x - 25,
          y: pos.y - 25,
          width: 50,
          height: 50,
          draggable: true,
        });

        // 设置图片可拖动
        darthVaderImg.setAttr("isDraggable", true);

        darthVaderImg.on("mouseover", function () {
          document.body.style.cursor = "pointer";
        });
        darthVaderImg.on("mouseout", function () {
          document.body.style.cursor = "default";
        });

        layer.add(darthVaderImg);
        stage.add(layer);
      }
    }
  }

  // 线条
  line(layer, groupLine, stage) {
    let isDrawing = false;
    let line , circle;
    let pos;
    
    // 清除上一次工具留下的痕迹
    this.clearPreviousToolEventListeners(stage);

    // 监听鼠标按下事件
    stage.on("mousedown touchstart", touchstart);
    // 将当前事件存入 previousToolEventHandlers
    this.previousToolEventHandlers.push({
      type: "mousedown touchstart",
      handler: touchstart,
    });

    // 监听鼠标移动事件
    stage.on("mousemove touchmove", touchmove);
    this.previousToolEventHandlers.push({
      type: "mousemove touchstart",
      handler: touchmove,
    });

    // 监听鼠标释放事件
    stage.on("mouseup touchend", touchend);
    this.previousToolEventHandlers.push({
      type: "mouseup touchstart",
      handler: touchend,
    });

    // 按下鼠标事件方法
    function touchstart(e) {
      // const shapes = stage.find(".circle"); // 拿到鼠标按下 点位 附近的形状对象

      isDrawing = true;
      pos = stage.getPointerPosition(); //获取按下位置的坐标
      const shape = stage.getIntersection(pos); // 获取鼠标按下位置的形状对象
      const shapeName = e.target
      // 遍历 根据 鼠标落点的坐标和 circleArr 内形状对象的中心坐标进行测试两点的距离，距离最小的则是我们寻找的形状对象
      // const minDistanceId = this.verbEdgeCoupling(shapes, pos);
      // for (let i = 0; i < shapes.length; i++) {
      //   if (shapes[i].index === minDistanceId) {
      // shapes[i] 就是我们要找的形状对象 ，接下来需要计算出形状对象的冒个边界点离落点最近，这个点则是
      // 最后线条起点的位置
      // const poos = {
      //   x: shapes[i].x() + shapes[i].radius(),
      //   y: shapes[i].y(),
      // };

      if (shapeName.getName() === "") {
        line = new Konva.Line({
          points: [pos.x, pos.y, pos.x, pos.y], // 初始位置和终点位置相同，创建一条长度为0的线条
          stroke: "black", // 线条颜色
          strokeWidth: 8, // 线条宽度
          lineCap: "round",
          lineJoin: "round",
          name: "line",
          draggable: false // 设置整个线条为不可拖动
        });
        groupLine.add(line);
        layer.add(groupLine);

        circle = new Konva.Circle({
          x:pos.x,
          y:pos.y,
          radius: 3, // 物体大小
          fill: "pink", // 物体内部颜色
          stroke: "black", //物体边缘颜色
          strokeWidth: 1, //物体边缘大小
          name: "LineCircle",
        })
        groupLine.add(circle)
        layer.add(groupLine)
        stage.add(layer);
        stage.draw(); // 更新舞台
      } else if(shapeName.getName() === "line"){
          const children = layer.getChildren();
          const lastcircle = children[children.length-1]
          lastcircle.remove()
      }
      
    }

    // 鼠标移动事件方法
    function touchmove() {
      const pos = stage.getPointerPosition(); //获取按下位置的坐标
      const shape = stage.getIntersection(pos); // 获取鼠标按下位置的形状对象
      if (!isDrawing) {
        return;
      }

        const points = line.points().slice(); // 获取线条当前的点集合
        points[2] = pos.x; // 更新线条终点的 x 坐标
        points[3] = pos.y; // 更新线条终点的 y 坐标
        line.points(points); // 更新线条的点集合
        layer.batchDraw();

    }

    // 鼠标松开事件
    function touchend() {
      const pos = stage.getPointerPosition()
      isDrawing = false;
      circle = new Konva.Circle({
        x:pos.x,
        y:pos.y,
        radius: 3, // 物体大小
        fill: "pink", // 物体内部颜色
        stroke: "black", //物体边缘颜色
        strokeWidth: 1, //物体边缘大小
        name: "endLineCircle",
      })
      groupLine.add(circle)
      layer.add(groupLine)

      // const pos = stage.getPointerPosition(); //获取按下位置的坐标
      // const shapes = stage.find(".circle"); // 拿到鼠标按下 点位 附近的形状对象
      // 遍历 根据 鼠标落点的坐标和 circleArr 内形状对象的中心坐标进行测试两点的距离，距离最小的则是我们寻找的形状对象
      // const minDistanceId = this.verbEdgeCoupling(shapes, pos);
      // for(let i = 0 ; i<shapes.length ; i++){
      //   if(shapes[i].index === minDistanceId){
      //     const poosend = {
      //       x: shapes[i].x() - shapes[i].radius(),
      //       y: shapes[i].y(),
      //     }
      //     console.log(line.points()[0]);
      //     // const poinits = line.points.slice();
      //     line.points()[2] = poosend.x;
      //     line.points()[3] = poosend.y
      //     // line.points(poinits)
      //     stage.draw(); // 更新舞台
      //   }
      // }
    }

    // 寻找某形状对象中心坐标 与 鼠标落点坐标 距离最小值 this[0].attrs.x
    function verbEdgeCoupling(shapes, pos) {
      //最近的形状对象
      let minDistanceId = Infinity;
      let nearestShape = null;
      let adjective = [];
      console.log(shapes);

      for (let i = 0; i < shapes.length; i++) {
        const distance = Math.sqrt(
          Math.pow(shapes[i].attrs.x - pos.x, 2) +
            Math.pow(shapes[i].attrs.y - pos.y, 2)
        );
        const distanceObj = {
          id: i,
          distance: distance,
        };
        adjective.push(distanceObj);
      }

      const minDistanceIndex = adjective.findIndex(
        (obj) =>
          obj.distance === Math.min(...adjective.map((obj) => obj.distance))
      );
      minDistanceId = adjective[minDistanceIndex].id;

      return minDistanceId;
    }
  }

  // 清除先前工具的事件监听器
  clearPreviousToolEventListeners(stage) {
    this.previousToolEventHandlers.forEach(({ type, handler }) => {
      stage.off(type, handler);
    });
    this.previousToolEventHandlers = [];
  }
}
